<template>
	<gui-page :refresh="true" @reload="reload" :loadmore="true" @loadmorefun="loadData"
		:apiLoadingStatus="apiLoadingStatus" ref="guipage">
		<template v-slot:gBody>
			<gui-a-header title="关注岗位"></gui-a-header>
			<view class="post-list">
				<gui-empty v-if="noData">
					<template v-slot:img>
						<view class="gui-flex gui-row gui-justify-content-center">
							<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png" mode="widthFix">
							</image>
						</view>
					</template>
					<template v-slot:text>
						<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
					</template>
				</gui-empty>
				<view class="item" v-for="(item, itemIndex) in dataList" :key="item.id"
					@click="$u.to(`/pages/post/postDetail?id=${item.id}`)">
					<view class="flex-ac-jb">
						<text class="title">{{item.postName}}</text>
						<text class="pay f24 colorRed">{{item.postMoney}}</text>
					</view>
					<view class="info flex-ac f22">
						<text>{{item.addressInfo}} {{item.work}} {{item.education}} 招{{item.recruitNum}}人</text>
					</view>
					<view class="gui-flex gui-space-between">
						<view class="gui-flex1 gui-flex gui-wrap f18 gui-overflow-hidden"
							v-if="item.comUsertConpanyInfo.welfareTreatment">
							<view class="post-label no-wrap c999"
								v-for="(wItem,wIndex) in item.comUsertConpanyInfo.welfareTreatment.split(',')"
								:key="wIndex">{{wItem}}
							</view>
						</view>
						<view class="gui-flex1 gui-flex gui-wrap f18 gui-overflow-hidden" v-else>
						</view>
						<view class="concern_btn" @click.stop="postCollect(item)">
							<view class="saveBtn" v-if="item.gzNum == 0">
								<text>已关注</text>
								<image class="icon" src="../../static/mine/collect.png" mode="widthFix"
									style="height: auto;">
								</image>
							</view>
							<view class="saveBtn" v-if="item.gzNum == 1" style="background: #e9f0fe;color: #4072FE;">
								<text>已取消</text>
								<image class="icon" src="../../static/mine/collect_no.png" mode="widthFix"
									style="height: auto;">
								</image>
							</view>
						</view>
					</view>
					<view class="company flex-ac-jb">
						<view class="left flex-ac">
							<image class="qiye-icon" src="../../static/index/qiye.png" mode="widthFix"
								style="height: auto;"></image>
							<text class="c666 f24">{{item.comUsertConpanyInfo.companyName}}</text>
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		selectUserPostFollowListAll,
		UpUserPostFollow
	} from '@/api/user.js';
	const $u = reactive(inject('$u'))
	const guipage = ref(null);
	const loading = ref(true);

	const reload = (isRelod = true) => {
		query.value.pageNum = 1;
		loadData(isRelod);
	}
	const query = ref({
		pageNum: 1,
		pageSize: 10
	})

	const apiLoadingStatus = ref(false)
	const noData = ref(false);
	const dataList = ref([])

	// 查询
	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		selectUserPostFollowListAll(queryParam).then(res => {
			if (res.code == 200) {
				var resultArr = res.rows;
				let total = Math.ceil(res.total / queryParam.pageSize);
				if (queryParam.pageNum >= 2) {
					dataList.value = dataList.value.concat(resultArr);
					guipage.value.stoploadmore();
					if (queryParam.pageNum >= total) {
						guipage.value.nomore();
					}
				}
				else {
					loading.value = false;
					dataList.value = [];
					dataList.value = resultArr;
					if (isReload) {
						guipage.value.endReload();
					} else {
						guipage.value.stoploadmore();
					}
					(resultArr.length <= 0) ? noData.value = true: noData.value = false;
				}
				query.value.pageNum++;
			}
		})
	}

	const postCollect = (item) => {
		UpUserPostFollow({
			refPostId: item.id
		}).then(res => {
			if (res.code == 200) {
				if (item.gzNum == 0) {
					item.gzNum = 1;
				} else {
					item.gzNum = 0;
				}
			}
		})
	}
	loadData();
</script>

<style lang="scss">
	.post-list {
		padding: 0 38rpx 0 44rpx;
	}

	.concern_btn {
		width: 132rpx;
		display: flex;
		justify-content: flex-end;

		.saveBtn {
			width: 130rpx;
			height: 43rpx;
			border-radius: 14rpx;
			background: rgba(64, 114, 254, 1);
			font-size: 20rpx;

			.icon {
				width: 20rpx;
				margin-left: 10rpx;
			}
		}
	}

	.post-label {
		margin-bottom: 20rpx;
	}
</style>